<template>
  <div class="container">
    <!-- 输入筛选条件区域 -->
    <el-card>
      <el-row class="btn">
        <el-col :span="4" :offset="20">
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="addQuestion"
            class="left"
            >新增试题</el-button
          ></el-col
        >
      </el-row>
      <el-form>
        <el-row :gutter="0">
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <span class="text sub">学科</span>
              <el-select
                slot="prepend"
                placeholder="请选择"
                v-model="query.subjectID"
              >
                <el-option
                  :label="item.subjectName"
                  :value="item.id"
                  v-for="item in subject_list"
                  :key="item.id"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <span class="text">二级目录</span>
              <el-select
                slot="prepend"
                placeholder="请选择"
                v-model="query.catalogID"
              >
                <el-option
                  :label="item.directoryName"
                  :value="item.id"
                  v-for="item in dirList"
                  :key="item.id"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <span class="text">标签</span>
              <el-select
                slot="prepend"
                placeholder="请选择"
                v-model="query.tags"
              >
                <el-option
                  :label="item.tagName"
                  :value="item.id"
                  v-for="item in tagsList"
                  :key="item.id"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <span class="text">关键字</span>
              <el-input v-model="query.keyword"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <span class="text">试题类型</span>
              <el-select
                slot="prepend"
                placeholder="请选择"
                v-model="query.questionType"
              >
                <el-option label="单选" value="1"></el-option>
                <el-option label="多选" value="2"></el-option>
                <el-option label="简单" value="3"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <span class="text sub">难度</span>
              <el-select
                slot="prepend"
                placeholder="请选择"
                v-model="query.difficulty"
              >
                <el-option label="简单" value="1"></el-option>
                <el-option label="一般" value="2"></el-option>
                <el-option label="困难" value="3"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <span class="text">方向</span>
              <el-select
                slot="prepend"
                placeholder="请选择"
                v-model="query.direction"
              >
                <el-option label="o2o" value="1"></el-option>
                <el-option label="外包服务" value="2"></el-option>
                <el-option label="企业服务" value="3"></el-option>
                <el-option label="互联网金融" value="4"></el-option>
                <el-option label="企业咨询" value="5"></el-option>
                <el-option label="互联网" value="6"></el-option>
                <el-option label="电子商务" value="7"></el-option>
                <el-option label="其他" value="8"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <span class="text">录入人</span>
              <el-select
                slot="prepend"
                placeholder="请选择"
                v-model="query.creatorID"
              >
                <el-option
                  :label="item.username"
                  :value="item.id"
                  v-for="(item, index) in userList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <span class="text">题目备注</span>
              <el-input v-model="query.remarks"></el-input>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <span class="text">企业简称</span>
              <el-input v-model="query.shortName"></el-input>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <span class="text">城市</span>
              <el-select
                slot="prepend"
                placeholder="请选择"
                v-model="query.province"
                class="wid"
                @change="onProvinceChange"
              >
                <el-option
                  v-for="(v, k, i) in province"
                  :key="i"
                  :label="v"
                  :value="v"
                >
                </el-option>
              </el-select>
              <el-select
                slot="prepend"
                placeholder="请选择"
                v-model="query.city"
                class="wid"
              >
                <el-option
                  v-for="(v, k, i) in citys"
                  :key="i"
                  :label="v"
                  :value="v"
                >
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <el-button size="mini" @click="clearFn" class="mar">清除</el-button>
            <el-button type="primary" size="mini" @click="showList"
              >搜索</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <!-- 消息提示区 -->
      <el-alert title="数据共132条" type="info" show-icon> </el-alert>
      <!-- 数据表格区域 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="180">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="80">
        </el-table-column>
        <el-table-column prop="catalog " label="目录"> </el-table-column>
        <el-table-column prop="questionType" label="题型" width="80">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.questionType === '1'">单选</span>
              <span v-else-if="scope.row.questionType === '2'">多选</span>
              <span v-else>简答</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间"> </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="80">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.difficulty === '1'">简单</span>
              <span v-else-if="scope.row.difficulty === '2'">一般</span>
              <span v-else>困难</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120">
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              circle
              icon="el-icon-view"
              @click="showViewDialog(scope.row)"
            ></el-button>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-edit"
              circle
              @click="editDialog(scope.row.id)"
            ></el-button>
            <el-button
              size="small"
              icon="el-icon-delete"
              type="danger"
              circle
              @click="showDeleteDialog(scope.row)"
            ></el-button>
            <el-button
              size="small"
              icon="el-icon-check"
              type="success"
              circle
              @click="add"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 数据表格区域 -->
      <!-- 分页区 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 分页区 -->
      <!-- 单选对话框 -->
      <el-dialog
        title="题目预览"
        :visible.sync="viewRadio"
        width="60%"
        class="dialog_text"
      >
        <p>
          <span>【题型】：{{ viewInfo.questionType }}</span>
          <span>【编号】：{{ viewInfo.number }}</span>
          <span>【难度】：{{ viewInfo.difficulty }}</span>
          <span>【标签】：{{ viewInfo.tags }}</span>
        </p>
        <p>
          <span>【学科】：{{ viewInfo.subjectID }}</span>
          <span>【目录】：{{ viewInfo.catalogID }}</span>
          <span>【方向】：{{ viewInfo.direction }}</span>
        </p>
        <hr />
        <p>【题干】：</p>
        <p>{{ viewInfo.question }}</p>
        <p>单选题 选项：（以下选中的选项为正确选项）</p>
        <el-radio v-model="radio" label="1">1</el-radio><br />
        <el-radio v-model="radio" label="2">2</el-radio><br />
        <el-radio v-model="radio" label="2">3</el-radio><br />
        <el-radio v-model="radio" label="2">4</el-radio>
        <hr />
        <p>【参考答案】：<el-button type="danger">视频参考答案</el-button></p>
        <video :src="viewInfo.videoURL" controls></video>
        <hr />
        <p>【答案解析】：{{ viewInfo.answer }}</p>
        <p>【题目备注】：{{ viewInfo.remarks }}</p>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 单选对话框 -->
      <!-- 多选框 -->
      <el-dialog
        title="题目预览"
        :visible.sync="viewCheckbox"
        width="60%"
        class="dialog_text"
      >
        <p>
          <span>【题型】：{{ viewInfo.questionType }}</span>
          <span>【编号】：{{ viewInfo.number }}</span>
          <span>【难度】：{{ viewInfo.difficulty }}</span>
          <span>【标签】：{{ viewInfo.tags }}</span>
        </p>
        <p>
          <span>【学科】：{{ viewInfo.subjectID }}</span>
          <span>【目录】：{{ viewInfo.catalogID }}</span>
          <span>【方向】：{{ viewInfo.direction }}</span>
        </p>
        <hr />
        <p>【题干】：</p>
        <p>{{ viewInfo.question }}</p>
        <p>多选题 选项：（以下选中的选项为正确选项）</p>
        <el-checkbox v-model="checked">河北</el-checkbox><br />
        <el-checkbox v-model="checked">天津</el-checkbox><br />
        <el-checkbox v-model="checked">内蒙</el-checkbox><br />
        <el-checkbox v-model="checked">辽宁</el-checkbox>
        <hr />
        <p>【参考答案】：<el-button type="danger">视频参考答案</el-button></p>
        <video :src="viewInfo.videoURL" controls></video>
        <hr />
        <p>【答案解析】：{{ viewInfo.answer }}</p>
        <p>【题目备注】：{{ viewInfo.remarks }}</p>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 多选框 -->
      <!-- 简答 -->
      <el-dialog
        title="题目预览"
        :visible.sync="viewWord"
        width="60%"
        class="dialog_text"
      >
        <p>
          <span>【题型】：{{ viewInfo.questionType }}</span>
          <span>【编号】：{{ viewInfo.number }}</span>
          <span>【难度】：{{ viewInfo.difficulty }}</span>
          <span>【标签】：{{ viewInfo.tags }}</span>
        </p>
        <p>
          <span>【学科】：{{ viewInfo.subjectID }}</span>
          <span>【目录】：{{ viewInfo.catalogID }}</span>
          <span>【方向】：{{ viewInfo.direction }}</span>
        </p>
        <hr />
        <p>【题干】：</p>
        <p>{{ viewInfo.question }}</p>
        <hr />
        <p>【参考答案】：<el-button type="danger">视频参考答案</el-button></p>
        <video :src="viewInfo.videoURL" controls></video>
        <hr />
        <p>【答案解析】：{{ viewInfo.answer }}</p>
        <p>【题目备注】：{{ viewInfo.remarks }}</p>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 简答 -->
    </el-card>
  </div>
</template>

<script>
import { list as getSub } from '@/api/hmmm/subjects.js'
import { list as getDir } from '@/api/hmmm/directorys.js'
import { list as getTags } from '@/api/hmmm/tags.js'
// 导入城市和区县
import { provinces, citys } from '@/api/hmmm/citys'
import { list as getUsers } from '@/api/base/users.js'
import {
  list as getList,
  remove as deleteQ,
  choiceAdd as addFn
} from '@/api/hmmm/questions.js'
export default {
  data() {
    return {
      province: provinces(),
      citys: [],
      checked: false,
      radio: false,
      subject_list: [],
      tableData: [],
      currentPage4: 1,
      dirList: [], // 目录列表
      tagsList: [], // 标签列表
      query: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        difficulty: '',
        questionType: '',
        tags: '',
        province: '', // 企业所在省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: null, // 录入人id
        catalogID: null // 目录id
      },
      total: 1, // 总共条数
      viewRadio: false, // 预览单选对话框
      viewCheckbox: false, // 多选预览对话框
      viewWord: false,
      viewInfo: {},
      userList: []
    }
  },
  methods: {
    handleSizeChange(val) {
      this.query.pagesize = val
      this.showList()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.showList()
    },
    // 获取学科列表
    async getSubjectList() {
      try {
        const { data: res } = await getSub()
        // console.log('111')
        this.subject_list = res.items
        // console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    // 加载目录列表
    async getDirList() {
      const { data: res } = await getDir()
      // console.log(res)
      this.dirList = res.items
    },
    // 获取标签列表
    async getTagsList() {
      const { data: res } = await getTags()
      // console.log(res)
      this.tagsList = res.items
    },
    // 清除按钮
    clearFn() {
      // 重置表单
      for (const key in this.query) {
        this.query[key] = null
      }
      this.query.page = 1
      this.query.pagesize = 10
    },
    // 根据条件请求数据并展示
    async showList() {
      const { data: res } = await getList(this.query)
      console.log(res)
      this.tableData = res.items
      // 对题型进行加工
      if (this.tableData.questionType === '1') {
        this.tableData.questionType = '单选'
      } else if (this.tableData.questionType === '2') {
        this.tableData.questionType = '多选'
      } else {
        this.tableData.questionType = '简单'
      }
      this.total = res.counts
    },
    // 添加新增试题
    addQuestion(id) {
      // 跳转到试题录入组件
      this.$router.push('/questions/new')
    },
    // 点击弹出预览对话框
    showViewDialog(row) {
      // 判断传入的类型是什么 来显示对应的对话框
      if (row.questionType === '1') {
        this.viewRadio = true
        // 把传进来的对象给对话框
        this.viewInfo = row
      } else if (row.questionType === '2') {
        // 多选
        this.viewCheckbox = true
      } else {
        // 简答
        this.viewWord = true
      }
    },
    // 删除对话框
    async showDeleteDialog(row) {
      const result = await this.$confirm(
        '此操作将永久删除该题目, 是否继续?',
        '提示',
        {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (result !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      // 删除
      const { data: res } = await deleteQ(row)
      console.log(res)
      // 重新获取数据
      this.showList()
    },
    // 修改功能
    editDialog(id) {
      // 跳转到录入题库
      this.$router.push({
        path: '/questions/new',
        query: {
          id
        }
      })
    },
    // 加入精选
    add() {
      // 弹出确认框
      this.$confirm('此操作将题目加入精选, 是否继续?', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 发起删除请求
          this.$message({
            type: 'success',
            message: '加入成功!'
          })
          this.$router.push('/questions/choice')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消加入'
          })
        })
    },
    // 加入精选题库函数
    async addFnn() {
      await addFn()
    },
    onProvinceChange(val) {
      this.query.city = ''
      this.citys = citys(val)
    },
    // 获取录入人信息
    async getUserFn() {
      try {
        const { data: res } = await getUsers({
          page: 1,
          pagesize: 100,
          keyword: ''
        })
        this.userList = res.list
      } catch (error) {}
    }
  },
  created() {
    this.getSubjectList()
    this.getDirList()
    this.getTagsList()
    this.showList()
    this.getUserFn()
  }
}
</script>

<style scoped lang="less">
.text {
  font-weight: 700;
}
.el-row {
  margin-bottom: 10px;
}
.el-input {
  margin-left: 10px;
  width: 70%;
}
.el-select {
  margin-left: 10px;
  width: 70%;
}
.dialog_text {
  p {
    span {
      margin-right: 100px;
    }
  }
}
.wid {
  width: 35%;
}
.mar {
  margin-left: 165px;
}
.left {
  margin-left: 60px;
}
.sub {
  margin-left: 33px;
}
</style>
